
import React, { PureComponent } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import { Button, Tag } from 'antd'
import CustomizeTableProvide, { CustomizeTable } from '@common/presentational/CustomizeTable'
import DropdownMenu from '@common/presentational/DropdownMenu'
import { priceFenToYuan } from '@utils/priceConversion'
import DiscountModal from '@components/customer/modal/DiscountModal'
import DefaultModal from '@components/customer/modal/DefaultModal'
import DeleteModal from '@components/customer/modal/DeleteModal'
import { MEMBER_CARD_TYPE } from '@constants/CustomerMember'
import {
    getCustomerMemberList,
    getCustomerMemberDetail,
    getCustomerMemberDiscount,
} from '@sagas/customer'
import BilinIcon from "@common/presentational/BilinIcon";

@withRouter
@connect(({ customer }) => ({
    customerMemberListMap: customer.customerMemberListMap,
}), {
    getCustomerMemberList,
    getCustomerMemberDetail,
    getCustomerMemberDiscount,
})

class CustomerMemberPage extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {}

        this.tableRef = React.createRef()
        this.discountModalRef = React.createRef()
        this.defaultModalRef = React.createRef()
        this.deleteModalRef = React.createRef()
        
        this.handleGetTableInfo = this.handleGetTableInfo.bind(this) // 获取列表信息
        this.handleDelete = this.handleDelete.bind(this) // 删除
        this.handleSetDefault = this.handleSetDefault.bind(this) // 设为默认

        // table
        this.columns = [{
            key: 'name',
            dataIndex: 'name',
            title: '会员卡名称',
            render: (text, record) => {
                return (
                    <>
                        {text}{record.is_default ? <span className="tag-default mgl-8 ft-12">默认卡</span> : null}
                    </>
                )
            },
        }, {
            key: 'card_type',
            dataIndex: 'card_type',
            title: '类型',
            render: (text, record) => MEMBER_CARD_TYPE[text],
        }, {
            key: 'recharge',
            dataIndex: 'recharge',
            title: '充值权益',
            render: (text, record) => record.can_recharge ? `最低起充${priceFenToYuan(record.topup_limit)}元` : '- -',
        }, {
            key: 'integral',
            dataIndex: 'integral',
            title: '积分权益',
            render: (text, record) => record.can_integral ? `每消费${priceFenToYuan(record.unit_integral_amount)}元积1分` : '- -',
        }, {
            key: 'operation',
            dataIndex: 'operation',
            title: '操作',
            render: (text, record) => {
                let dropList = [{
                    key: 'default',
                    name: '设为默认',
                }, /*{
                    key: 'delete',
                    name: '删除',
                } */];
                return (
                    <div className="flex-vertical-center">
                        <div onClick={this.handleModify.bind(this, record)} className="mgr-16 ft-hover">编辑</div>
                        <div onClick={this.handleSetDiscount.bind(this, record)} className="mgr-16 ft-hover">设置折扣</div>
                        {!record.is_default ? <DropdownMenu
                            dropdownList={dropList}
                            onClick={this.handleRowOperation.bind(this, record)}
                        >
                            <div className="ft-hover">更多</div>
                        </DropdownMenu> : null}
                    </div>
                )
            }
        }]
    }

    handleGetTableInfo() {
        this.props.getCustomerMemberList()
    }

    handleCreate() {
        const { history } = this.props
        history.push(`/customer/member/create`)
    }

    handleModify(record) {
        const { history, getCustomerMemberDetail } = this.props
        const { card_id } = record
        getCustomerMemberDetail({
            card_id,
        }, res => {
            history.push({
                pathname: `/customer/member/edit/${card_id}`,
                state: {
                    ...res,
                },
            })
        })
    }

    handleDelete(record) {
        const { card_id } = record
        this.deleteModalRef.current?.show({
            card_id,
        })
    }

    handleSetDiscount(record) {
        const { getCustomerMemberDiscount } = this.props
        const { card_id, name } = record
        getCustomerMemberDiscount({
            card_id,
        }, res => {
            const data = res ? res.card_discount || {} : {}
            this.discountModalRef.current?.show({
                ...data,
                out_card_id: card_id,
                name,
            })
        })
    }

    handleSetDefault(record) {
        const { card_id } = record
        this.defaultModalRef.current?.show({
            card_id,
        })
    }

    handleRowOperation(record, type) {
        switch (type) {
            case 'default':
                this.handleSetDefault(record)
                break
            case 'delete':
                this.handleDelete(record)
                break
            default:
                break
        }
    }

    render() {
        const { customerMemberListMap } = this.props
        return (
            <div className="table-scroll-container customer-member-page">
                <div className="intro-panel">
                    <div className="mgb-16 ft-24">会员计划</div>
                    <div className="ft-clr-ml ft-18">精细化会员运营，培养会员忠诚度，提高品牌的口碑，促增长</div>
                    <img className="intro-pic" src={require('@assets/image/customer_member_intro.png')} alt=""/>
                </div>
                <div className="table-params page-params flex-row-between mgb-16">
                    <div className="flex-vertical-center">
                        <Button type="primary" className="button-small mgr-16" onClick={this.handleCreate.bind(this)}>
                            <BilinIcon type="plus" className="ft-18 mgr-8"/>新建会员卡
                        </Button>
                    </div>
                </div>
                <CustomizeTableProvide ref={this.tableRef} tableKey="customerMemberList" onChange={this.handleGetTableInfo}>
                    <div className="table-list">
                        <CustomizeTable
                            columns={this.columns}
                            dataSource={customerMemberListMap.cards || []}
                        />
                    </div>
                </CustomizeTableProvide>
                <DiscountModal callback={this.handleGetTableInfo} ref={this.discountModalRef} />
                <DefaultModal callback={this.handleGetTableInfo} ref={this.defaultModalRef} />
                <DeleteModal callback={this.handleGetTableInfo} ref={this.deleteModalRef} />
            </div>
        )
    }
}

export default CustomerMemberPage